<div class="gd-search">
    <div class="gd-search__wrap">
        <i class="iconfont iconsousuo1"></i>
        <input type="text" id="insKeyword" aria-label="Check any influencer username" placeholder="Check any influencer username...">
        <button class="gd-btn btn-info" onclick="searchFilterUser()">Search</button>
        <button class="gd-btn btn-filter" onclick="showFilter()">
            <i class="iconfont iconfilter-list"></i>
            Filter
        </button>
    </div>
</div>
<div class="filter-wrap" id="filterWrap">
    <div class="filter-item">
        <div class="label">Account Categories:</div>
        <div class="item-wrap">
            <div class="gd-select">
                <div class="gd-select-title">
                    <div class="label">Primary</div>
                    <i class="iconfont icondown1"></i>
                </div>
                <div class="gd-select-wrap">
                    <ul id="categoryPrimary" label="Primary" name="primaryCategory">
                    </ul>
                </div>
            </div>
            <div class="gd-select">
                <div class="gd-select-title">
                    <div class="label">Secondary</div>
                    <i class="iconfont icondown1"></i>
                </div>
                <div class="gd-select-wrap">
                    <ul id="secondaryPrimary" label="Secondary" name="secondCategory">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="filter-item">
        <div class="label" style="align-self: flex-start;margin-top: 6px;">Influencer Info:</div>
        <div class="item-wrap">
            <div class="gd-select">
                <div class="gd-select-title">
                    <div class="label">Country/Region</div>
                    <i class="iconfont icondown1"></i>
                </div>
                <div class="gd-select-wrap">
                    <ul id="influencerRegion" label="Country/Region" name="region">
                    </ul>
                </div>
            </div>
            <div class="gd-select">
                <div class="gd-select-title">
                    <div class="label">Language</div>
                    <i class="iconfont icondown1"></i>
                </div>
                <div class="gd-select-wrap">
                    <ul id="influencerLanguge" label="Language" name="language">
                    </ul>
                </div>
            </div>
            <div class="gd-select">
                <div class="gd-select-title">
                    <div class="label">Gender</div>
                    <i class="iconfont icondown1"></i>
                </div>
                <div class="gd-select-wrap">
                    <ul name="gender" label="Gender">
                        <li class="gd-option">All</li>
                        <li class="gd-option" value="1">Male</li>
                        <li class="gd-option" value="2">Female</li>
                        <li class="gd-option" value="3">Undefined</li>
                    </ul>
                </div>
            </div>
            <div class="gd-select">
                <div class="gd-select-title">
                    <div class="label">Age</div>
                    <i class="iconfont icondown1"></i>
                </div>
                <div class="gd-select-wrap">
                    <ul name="age" label="Age">
                        <li class="gd-option" value="0">All</li>
                        <li class="gd-option" value="1">18-</li>
                        <li class="gd-option" value="2">18 - 24</li>
<#--                        <li class="gd-option" value="3">21+</li>-->
                        <li class="gd-option" value="4">25 - 34</li>
                        <li class="gd-option" value="5">35 - 44</li>
                        <li class="gd-option" value="6">45+</li>
                    </ul>
                </div>
            </div>
            <div class="gd-select">
                <div class="gd-select-title">
                    <div class="label">Verification</div>
                    <i class="iconfont icondown1"></i>
                </div>
                <div class="gd-select-wrap">
                    <ul name="verification" label="Verification">
                        <li class="gd-option" value="0">All</li>
                        <li class="gd-option" value="1">Verified</li>
                        <li class="gd-option" value="2">Not verified</li>
                    </ul>
                </div>
            </div>
            <div class="gd-select">
                <div class="gd-select-title">
                    <div class="label">Contact Info</div>
                    <i class="iconfont icondown1"></i>
                </div>
                <div class="gd-select-wrap">
                    <ul name="contact" label="Contact Info">
                        <li class="gd-option" value="0">All</li>
                        <li class="gd-option" value="1">Has Contact</li>
                    </ul>
                </div>
            </div>
            <div class="gd-select">
                <div class="gd-select-title">
                    <div class="label">Account Type</div>
                    <i class="iconfont icondown1"></i>
                </div>
                <div class="gd-select-wrap">
                    <ul name="isBusiness" label="Account Type">
                        <li class="gd-option" value="0">All</li>
                        <li class="gd-option" value="2">Non-Business Account</li>
                        <li class="gd-option" value="1">Business Account</li>
                    </ul>
                </div>
            </div>
            <div class="gd-input-wrap">
                <label for="taggedUsername">Tagged</label>
                <input type="text" id="taggedUsername" name="taggedUsername" class="gd-input" placeholder="Enter Tagged Account Username">
            </div>
        </div>
    </div>
    <div class="filter-item">
        <div class="label">Influencer Data:</div>
        <div class="item-wrap">
            <div class="gd-select">
                <div class="gd-select-title">
                    <div class="label">Followers</div>
                    <i class="iconfont icondown1"></i>
                </div>
                <div class="gd-select-wrap">
                    <ul name="followers" label="Followers">
                        <li class="gd-option" value="0">All</li>
<#--                        <li class="gd-option" value="1">10K - 50K</li>-->
                        <li class="gd-option" value="2">50K - 100K</li>
                        <li class="gd-option" value="3">100K - 500K</li>
                        <li class="gd-option" value="4">500K - 1M</li>
                        <li class="gd-option" value="5">1M - 5M</li>
                        <li class="gd-option" value="6">5M - 10M</li>
                        <li class="gd-option" value="7">> 10M</li>
                    </ul>
                </div>
            </div>
           <#-- <div class="gd-select">
                <div class="gd-select-title">
                    <div class="label">Quality Followers</div>
                    <i class="iconfont icondown1"></i>
                </div>
                <div class="gd-select-wrap">
                    <ul name="qualityFollowers" label="Quality Followers">
                        <li class="gd-option" value="0">All</li>
                        <li class="gd-option" value="1">10K - 50K</li>
                        <li class="gd-option" value="2">50K - 100K</li>
                        <li class="gd-option" value="3">100K - 500K</li>
                        <li class="gd-option" value="4">500K - 1M</li>
                        <li class="gd-option" value="5">1M - 5M</li>
                        <li class="gd-option" value="6">5M - 10M</li>
                        <li class="gd-option" value="7">> 10M</li>
                    </ul>
                </div>
            </div>-->
            <div class="gd-select">
                <div class="gd-select-title">
                    <div class="label">Engagement Rate</div>
                    <i class="iconfont icondown1"></i>
                </div>
                <div class="gd-select-wrap">
                    <ul name="er" label="Engagement Rate">
                        <li class="gd-option" value="0">All</li>
                        <li class="gd-option" value="1">1% - 3%</li>
                        <li class="gd-option" value="2">3% - 5%</li>
                        <li class="gd-option" value="3">5% - 10%</li>
                        <li class="gd-option" value="4">10% - 20%</li>
                        <li class="gd-option" value="5">20% - 30%</li>
                        <li class="gd-option" value="6">> 30%</li>
                    </ul>
                </div>
            </div>
            <#--<div class="gd-select">
                <div class="gd-select-title">
                    <div class="label">30-Day Follower Growth</div>
                    <i class="iconfont icondown1"></i>
                </div>
                <div class="gd-select-wrap">
                    <ul name="followerGrowth" label="30-Day Follower Growth">
                        <li class="gd-option" value="0">All</li>
                        <li class="gd-option" value="1">< 5%</li>
                        <li class="gd-option" value="2">5% - 10%</li>
                        <li class="gd-option" value="3">10% - 20%</li>
                        <li class="gd-option" value="4">20% - 30%</li>
                        <li class="gd-option" value="5">30% - 50%</li>
                        <li class="gd-option" value="6">> 50%</li>
                    </ul>
                </div>
            </div>-->
        </div>
    </div>
    <div class="filter-item">
        <div class="label">Audience Data:</div>
        <div class="item-wrap">
            <div class="gd-select">
                <div class="gd-select-title">
                    <div class="label">Location</div>
                    <i class="iconfont icondown1"></i>
                </div>
                <div class="gd-select-wrap">
                    <ul id="audienceRegion" label="Audience Location" name="audienceRegionMore">
                    </ul>
                </div>
            </div>
            <div class="gd-select">
                <div class="gd-select-title">
                    <div class="label">Language</div>
                    <i class="iconfont icondown1"></i>
                </div>
                <div class="gd-select-wrap">
                    <ul id="audienceLanguage" label="Audience Language" name="audienceLanguageMore">
                    </ul>
                </div>
            </div>
            <div class="gd-select">
                <div class="gd-select-title">
                    <div class="label">Gender</div>
                    <i class="iconfont icondown1"></i>
                </div>
                <div class="gd-select-wrap">
                    <ul name="audienceGenderMore" label="Audience Gender">
                        <li class="gd-option is-active" value="0">All</li>
                        <li class="gd-option" value="1">More Male</li>
                        <li class="gd-option" value="2">More Female</li>
                    </ul>
                </div>
            </div>
            <div class="gd-select">
                <div class="gd-select-title">
                    <div class="label">Age</div>
                    <i class="iconfont icondown1 "></i>
                </div>
                <div class="gd-select-wrap">
                    <ul name="audienceAgeMore" label="Audience Age">
                        <li class="gd-option is-active" value="0">All</li>
                        <li class="gd-option" value="1">18-</li>
                        <li class="gd-option" value="2">18 - 24</li>
<#--                        <li class="gd-option" value="3">21+</li>-->
                        <li class="gd-option" value="4">25 - 34</li>
                        <li class="gd-option" value="5">35 - 44</li>
                        <li class="gd-option" value="6">45+</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="filter-item" id="selectedFilterItem">
        <div class="label">Selected:</div>
        <div class="selected-wrap" id="selectedWrap"></div>
        <div class="right" onclick="clearParam()">Clear</div>
    </div>
</div>